Ovladavanje validacijom obrazaca s Reactovim `experimental_useFormStatus` hookom

Obrasci su temelj interakcije na webu. Od jednostavne prijave na newsletter do složene višefazne financijske aplikacije, oni su primarni kanal putem kojeg korisnici komuniciraju s našim aplikacijama. Ipak, godinama je upravljanje stanjem obrazaca u Reactu bilo izvor složenosti, ponavljajućeg koda i zamora od ovisnosti. Žonglirali smo s kontroliranim komponentama, borili se s bibliotekama za upravljanje stanjem i pisali bezbrojne `onChange` handlere, sve u potrazi za besprijekornim i intuitivnim korisničkim iskustvom.

React tim je preispitivao ovaj temeljni aspekt web razvoja, što je dovelo do uvođenja nove, moćne paradigme usredotočene na React Server Actions. Ovaj novi model, izgrađen na principima progresivnog poboljšanja, ima za cilj pojednostaviti rukovanje obrascima premještanjem logike bliže mjestu gdje pripada – često, na poslužitelj. U srcu ove klijentske revolucije nalaze se dva nova eksperimentalna hooka: `useFormState` i zvijezda naše današnje rasprave, `experimental_useFormStatus`.

Ovaj sveobuhvatni vodič provest će vas kroz dubinsku analizu `experimental_useFormStatus` hooka. Nećemo samo gledati njegovu sintaksu; istražit ćemo mentalni model koji omogućuje: Logiku validacije temeljenu na statusu. Naučit ćete kako ovaj hook odvaja korisničko sučelje od stanja obrasca, pojednostavljuje upravljanje stanjima na čekanju i radi u suradnji s poslužiteljskim akcijama kako bi se stvorili robusni, pristupačni i visoko performantni obrasci koji rade čak i prije nego što se JavaScript učita. Pripremite se preispitati sve što ste mislili da znate o izradi obrazaca u Reactu.

Promjena paradigme: Evolucija React obrazaca

Kako bismo u potpunosti cijenili inovaciju koju `useFormStatus` donosi, moramo prvo razumjeti put upravljanja obrascima u React ekosustavu. Ovaj kontekst naglašava probleme koje ovaj novi pristup elegantno rješava.

Stara garda: Kontrolirane komponente i biblioteke trećih strana

Godinama je standardni pristup obrascima u Reactu bio obrazac kontrolirane komponente. To uključuje:

• Korištenje varijable React stanja (npr. iz `useState`) za čuvanje vrijednosti svakog unosa u obrascu.
• Pisanje `onChange` handlera za ažuriranje stanja pri svakom pritisku tipke.
• Prosljeđivanje varijable stanja natrag u `value` prop unosa.

Iako ovo Reactu daje potpunu kontrolu nad stanjem obrasca, uvodi značajnu količinu ponavljajućeg koda. Za obrazac s deset polja, možda će vam trebati deset varijabli stanja i deset funkcija handlera. Upravljanje validacijom, stanjima grešaka i statusom slanja dodaje još više složenosti, što često dovodi do toga da programeri stvaraju zamršene prilagođene hookove ili posežu za sveobuhvatnim bibliotekama trećih strana.

Biblioteke poput Formika i React Hook Forma stekle su popularnost apstrahiranjem te složenosti. One pružaju briljantna rješenja za upravljanje stanjem, validaciju i optimizaciju performansi. Međutim, one predstavljaju još jednu ovisnost za upravljanje i često rade isključivo na strani klijenta, što može dovesti do duplicirane logike validacije između frontenda i backenda.

Nova era: Progresivno poboljšanje i poslužiteljske akcije

React Server Actions uvode promjenu paradigme. Osnovna ideja je graditi na temeljima web platforme: standardnom HTML `

` elementu. Obrazac s poslužiteljskom akcijom radi kao klasično slanje HTML obrasca – može funkcionirati savršeno čak i ako JavaScript zakaže ili je onemogućen. To je suština progresivnog poboljšanja.

Kada se JavaScript učita, React preuzima proces slanja obrasca, sprječavajući ponovno učitavanje cijele stranice i izvršavajući poslužiteljsku akciju asinkrono. To nam daje najbolje od oba svijeta: otpornost aplikacija renderiranih na poslužitelju i bogato, interaktivno iskustvo jednostranične aplikacije (SPA).

Ovaj model premješta izvor istine za poslovnu logiku i validaciju natrag na poslužitelj (ili okruženje slično poslužitelju). Klijentski kod postaje jednostavniji, prvenstveno se baveći renderiranjem korisničkog sučelja na temelju *statusa* te poslužiteljske komunikacije. Upravo ovdje `useFormStatus` stupa na scenu.

Ispod haube: Što je `experimental_useFormStatus`?

`experimental_useFormStatus` hook je klijentski alat dizajniran za pružanje informacija o posljednjem slanju roditeljskog `` elementa. To je hook samo za čitanje koji komponenti govori sve što treba znati o statusu slanja obrasca bez potrebe za prosljeđivanjem propova.

Osnovna funkcionalnost

Zamislite gumb za slanje unutar velikog obrasca. Kako taj gumb zna kada se obrazac šalje? Tradicionalno, trebali biste proslijediti varijablu stanja poput `isSubmitting` kroz više slojeva komponenata (prop drilling). S `useFormStatus` hookom, komponenta gumba može samostalno doći do te informacije.

Hook se mora pozvati iz komponente koja je renderirana *unutar* `` elementa. Zatim pruža informacije o statusu životnog ciklusa tog specifičnog obrasca.

Anatomija `useFormStatus` hooka

Kada pozovete `const status = useFormStatus()`, dobivate objekt sa sljedećim ključnim svojstvima:

• `pending` (boolean): Ovo je najčešće korišteno svojstvo. `true` je ako se roditeljski obrazac trenutno šalje, a `false` inače. Savršeno je za onemogućavanje gumba, prikazivanje indikatora učitavanja ili stiliziranje stanja na čekanju.
• `data` (FormData): Objekt koji implementira `FormData` sučelje. Sadrži podatke koji su poslani s obrascem. Ovo je nevjerojatno korisno za implementaciju optimističnih ažuriranja korisničkog sučelja – na primjer, prikazivanje korisnikovog komentara na popisu odmah nakon što ga pošalje, čak i prije nego što poslužitelj potvrdi njegovo stvaranje.
• `method` (string): HTTP metoda ('get' ili 'post') korištena za slanje obrasca.
• `action` (function): Referenca na funkciju poslužiteljske akcije koja je pozvana tijekom slanja.

Zlatno pravilo: Dijete `` elementa

Ključno pravilo koje treba zapamtiti jest da komponenta koja koristi `useFormStatus` mora biti renderirana kao dijete `` elementa koji prati. Ne može biti u istoj komponenti koja renderira sam `` tag, jer treba pristupiti kontekstu obrasca. Zbog toga ćete gotovo uvijek vidjeti komponente poput `` stvorene zasebno kako bi se u njima smjestila logika `useFormStatus` hooka.

Jednostavan primjer: Pametni gumb za slanje

Pogledajmo najčešći slučaj upotrebe na djelu. Umjesto standardnog ``, stvorit ćemo komponentu koja je svjesna stanja slanja obrasca.

Datoteka: SubmitButton.js

import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return (

{pending ? 'Slanje...' : 'Registriraj se'} ); }

Datoteka: SignUpForm.js

import { SubmitButton } from './SubmitButton'; import { signUpAction } from './actions'; // Poslužiteljska akcija export function SignUpForm() { return ( Email:
); }

U ovom primjeru, `SubmitButton` je potpuno samostalan. Ne prima nikakve propove. Koristi `useFormStatus` da bi znao kada je `SignUpForm` u stanju čekanja i automatski se onemogućuje i mijenja svoj tekst. Ovo je moćan obrazac za razdvajanje i stvaranje ponovno iskoristivih komponenata svjesnih obrasca.

Srž stvari: Logika validacije temeljena na statusu

Sada dolazimo do ključnog koncepta. `useFormStatus` nije samo za stanja učitavanja; on je ključni pokretač drugačijeg načina razmišljanja o validaciji.

Definiranje "Validacije temeljene na statusu"

Validacija temeljena na statusu je obrazac gdje se povratna informacija o validaciji prvenstveno isporučuje korisniku kao odgovor na pokušaj slanja obrasca. Umjesto validacije pri svakom pritisku tipke (`onChange`) ili kada korisnik napusti polje (`onBlur`), primarna logika validacije se izvršava kada korisnik pošalje obrazac. Rezultat tog slanja – njegov *status* (npr. uspjeh, greška u validaciji, greška na poslužitelju) – se zatim koristi za ažuriranje korisničkog sučelja.

Ovaj pristup savršeno se podudara s React Server Actions. Poslužiteljska akcija postaje jedini izvor istine za validaciju. Prima podatke iz obrasca, validira ih prema vašim poslovnim pravilima (npr. "koristi li se ovaj e-mail već?") i vraća strukturirani objekt stanja koji ukazuje na ishod.

Uloga njegovog partnera: `experimental_useFormState`

`useFormStatus` nam govori *što* se događa (na čekanju), ali nam ne govori *rezultat* onoga što se dogodilo. Za to nam je potreban njegov srodni hook: `experimental_useFormState`.

`useFormState` je hook dizajniran za ažuriranje stanja na temelju rezultata akcije obrasca. Prima funkciju akcije i početno stanje kao argumente i vraća novo stanje i omotanu funkciju akcije koju treba proslijediti vašem obrascu.

const [state, formAction] = useFormState(myAction, initialState);

• `state`: Ovo će sadržavati povratnu vrijednost iz posljednjeg izvršavanja `myAction`. Ovdje ćemo dobiti naše poruke o greškama.
• `formAction`: Ovo je nova verzija vaše akcije koju biste trebali proslijediti `action` propu `
  ` elementa. Kada se ovo pozove, pokrenut će originalnu akciju i ažurirati `state`.

Kombinirani tijek rada: Od klika do povratne informacije

Evo kako `useFormState` i `useFormStatus` rade zajedno kako bi stvorili potpunu petlju validacije:

1. Početno renderiranje: Obrazac se renderira s početnim stanjem koje pruža `useFormState`. Ne prikazuju se greške.
2. Korisničko slanje: Korisnik klikne na gumb za slanje.
3. Stanje na čekanju: `useFormStatus` hook u gumbu za slanje odmah prijavljuje `pending: true`. Gumb postaje onemogućen i prikazuje poruku o učitavanju.
4. Izvršavanje akcije: Poslužiteljska akcija (omotana s `useFormState`) se izvršava s podacima iz obrasca. Obavlja validaciju.
5. Akcija vraća rezultat: Akcija ne prolazi validaciju i vraća objekt stanja, na primjer:
   `{ message: "Validation failed", errors: { email: "This email is already taken." } }`
6. Ažuriranje stanja: `useFormState` prima ovu povratnu vrijednost i ažurira svoju `state` varijablu. To pokreće ponovno renderiranje komponente obrasca.
7. Povratna informacija korisničkom sučelju: Obrazac se ponovno renderira. Status `pending` iz `useFormStatus` hooka postaje `false`. Komponenta sada može pročitati `state.errors.email` i prikazati poruku o grešci pored polja za unos e-maila.

Cijeli ovaj tijek pruža jasnu, poslužiteljski autoritativnu povratnu informaciju korisniku, vođenu isključivo statusom i rezultatom slanja.

Praktični masterclass: Izrada registracijskog obrasca s više polja

Učvrstimo ove koncepte izgradnjom cjelovitog, produkcijskog registracijskog obrasca. Koristit ćemo poslužiteljsku akciju za validaciju i oba hooka, `useFormState` i `useFormStatus`, kako bismo stvorili sjajno korisničko iskustvo.

Korak 1: Definiranje poslužiteljske akcije s validacijom

Prvo, potrebna nam je naša poslužiteljska akcija. Za robusnu validaciju, koristit ćemo popularnu biblioteku Zod. Ova akcija će se nalaziti u zasebnoj datoteci, označenoj s direkivom `'use server';` ako koristite okvir kao što je Next.js.

Datoteka: actions/authActions.js

'use server'; import { z } from 'zod'; // Definirajte shemu validacije const registerSchema = z.object({ username: z.string().min(3, 'Korisničko ime mora imati najmanje 3 znaka.'), email: z.string().email('Molimo unesite valjanu e-mail adresu.'), password: z.string().min(8, 'Lozinka mora imati najmanje 8 znakova.'), }); // Definirajte početno stanje za naš obrazac export const initialState = { message: '', errors: {}, }; export async function registerUser(prevState, formData) { // 1. Validacija podataka iz obrasca const validatedFields = registerSchema.safeParse( Object.fromEntries(formData.entries()) ); // 2. Ako validacija ne uspije, vratite greške if (!validatedFields.success) { return { message: 'Validacija nije uspjela. Molimo provjerite polja.', errors: validatedFields.error.flatten().fieldErrors, }; } // 3. (Simulacija) Provjerite postoji li korisnik već u bazi podataka // U stvarnoj aplikaciji, ovdje biste postavili upit bazi podataka. if (validatedFields.data.email === 'user@example.com') { return { message: 'Registracija nije uspjela.', errors: { email: ['Ovaj e-mail je već registriran.'] }, }; } // 4. (Simulacija) Stvaranje korisnika console.log('Stvaranje korisnika:', validatedFields.data); // 5. Vratite stanje uspjeha // U stvarnoj aplikaciji, ovdje biste mogli preusmjeriti koristeći `redirect()` iz 'next/navigation' return { message: 'Korisnik uspješno registriran!', errors: {}, }; }

Ova poslužiteljska akcija je mozak našeg obrasca. Samostalna je, sigurna i pruža jasnu strukturu podataka za stanja uspjeha i greške.

Korak 2: Izrada ponovno iskoristivih komponenata svjesnih statusa

Kako bi naša glavna komponenta obrasca ostala čista, stvorit ćemo namjenske komponente za naše unose i gumb za slanje.

Datoteka: components/SubmitButton.js

'use client'; import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton({ label }) { const { pending } = useFormStatus(); return ( {pending ? 'Obrađuje se...' : label} ); }

Primijetite upotrebu `aria-disabled={pending}`. Ovo je važna praksa pristupačnosti, koja osigurava da čitači zaslona ispravno najave onemogućeno stanje.

Korak 3: Sastavljanje glavnog obrasca s `useFormState`

Sada, spojimo sve u našoj glavnoj komponenti obrasca. Koristit ćemo `useFormState` kako bismo povezali naše korisničko sučelje s `registerUser` akcijom.

Datoteka: components/RegistrationForm.js

'use client'; import { experimental_useFormState as useFormState } from 'react-dom'; import { registerUser, initialState } from '../actions/authActions'; import { SubmitButton } from './SubmitButton'; export function RegistrationForm() { const [state, formAction] = useFormState(registerUser, initialState); return (

Registracija

{state?.message && !state.errors &&

{state.message}

} {state?.message && state.errors &&

{state.message}

}

Korisničko ime {state?.errors?.username && (

{state.errors.username[0]}

)}

Email {state?.errors?.email && (

{state.errors.email[0]}

)}

Lozinka {state?.errors?.password && (

{state.errors.password[0]}

)}

); }

Ova je komponenta sada deklarativna i čista. Ne upravlja nikakvim stanjem sama, osim objekta `state` koji pruža `useFormState`. Njezin jedini posao je renderirati korisničko sučelje na temelju tog stanja. Logika za onemogućavanje gumba je enkapsulirana u `SubmitButton`, a sva logika validacije živi u `authActions.js`. Ovo razdvajanje odgovornosti ogroman je dobitak za održivost.

Napredne tehnike i najbolje profesionalne prakse

Iako je osnovni obrazac moćan, aplikacije u stvarnom svijetu često zahtijevaju više nijansi. Istražimo neke napredne tehnike.

Hibridni pristup: Spajanje trenutne i validacije nakon slanja

Validacija temeljena na statusu izvrsna je za provjere na strani poslužitelja, ali čekanje na mrežni povratni put kako bi se korisniku reklo da je njegov e-mail nevažeći može biti sporo. Hibridni pristup je često najbolji:

• Koristite HTML5 validaciju: Ne zaboravite osnove! Atributi poput `required`, `type="email"`, `minLength` i `pattern` pružaju trenutnu, preglednički nativnu povratnu informaciju bez ikakvih troškova.
• Lagana klijentska validacija: Za čisto kozmetičke provjere ili provjere formatiranja (npr. indikator jačine lozinke), još uvijek možete koristiti minimalnu količinu `useState` i `onChange` handlera.
• Autoritet na strani poslužitelja: Rezervirajte poslužiteljsku akciju za najkritičniju validaciju poslovne logike koja se ne može obaviti na klijentu (npr. provjera jedinstvenih korisničkih imena, validacija u odnosu na zapise u bazi podataka).

Ovo vam daje najbolje od oba svijeta: trenutnu povratnu informaciju za jednostavne greške i autoritativnu validaciju za složena pravila.

Pristupačnost (A11y): Izrada obrazaca za sve

Pristupačnost nije predmet pregovora. Prilikom implementacije validacije temeljene na statusu, imajte na umu sljedeće točke:

• Najavite greške: U našem primjeru koristili smo `aria-live="polite"` na kontejnerima za poruke o greškama. To govori čitačima zaslona da najave poruku o grešci čim se pojavi, bez prekidanja trenutnog tijeka rada korisnika.
• Povežite greške s unosima: Za robusniju vezu, koristite atribut `aria-describedby`. Unos može pokazivati na ID svog kontejnera za poruku o grešci, stvarajući programsku vezu.
• Upravljanje fokusom: Nakon slanja s greškama, razmislite o programskom premještanju fokusa na prvo nevažeće polje. To korisnicima štedi vrijeme traženja što je pošlo po zlu.

Optimistično korisničko sučelje sa svojstvom `data` iz `useFormStatus` hooka

Zamislite aplikaciju za društvene mreže gdje korisnik objavljuje komentar. Umjesto da prikazujete indikator učitavanja na sekundu, možete učiniti da se aplikacija čini trenutnom. Svojstvo `data` iz `useFormStatus` hooka savršeno je za to.

Kada se obrazac pošalje, `pending` postaje `true`, a `data` se popunjava s `FormData` podacima slanja. Možete odmah renderirati novi komentar u privremenom, 'čekajućem' vizualnom stanju koristeći te `data` podatke. Ako poslužiteljska akcija uspije, zamijenite čekajući komentar konačnim podacima s poslužitelja. Ako ne uspije, možete ukloniti čekajući komentar i prikazati grešku. Ovo čini da se aplikacija čini nevjerojatno responzivnom.

Plovidba "eksperimentalnim" vodama

Ključno je osvrnuti se na prefiks "experimental" u `experimental_useFormStatus` i `experimental_useFormState`.

Što "eksperimentalno" zaista znači

Kada React označi API kao eksperimentalan, to znači:

• API se može promijeniti: Ime, argumenti ili povratne vrijednosti mogu se izmijeniti u budućem izdanju Reacta bez praćenja standardnog semantičkog verziranja (SemVer) za prijelomne promjene.
• Mogu postojati bugovi: Kao nova značajka, može imati rubne slučajeve koji još nisu u potpunosti shvaćeni ili riješeni.
• Dokumentacija može biti oskudna: Iako su osnovni koncepti dokumentirani, detaljni vodiči o naprednim obrascima se možda još uvijek razvijaju.

Kada usvojiti, a kada pričekati

Dakle, trebate li ga koristiti u svom projektu? Odgovor ovisi o vašem kontekstu:

• Dobro za: Osobne projekte, interne alate, startupe ili timove kojima je ugodno upravljati potencijalnim promjenama API-ja. Korištenje unutar okvira kao što je Next.js (koji je integrirao ove značajke u svoj App Router) općenito je sigurnija oklada, jer okvir može pomoći apstrahirati neke od promjena.
• Koristiti s oprezom za: Velike poslovne aplikacije, sustave od kritične važnosti ili projekte s dugoročnim ugovorima o održavanju gdje je stabilnost API-ja od presudne važnosti. U tim slučajevima, možda bi bilo pametno pričekati dok se hookovi ne promoviraju u stabilan API.

Uvijek pratite službeni React blog i dokumentaciju za najave o stabilizaciji ovih hookova.

Zaključak: Budućnost obrazaca u Reactu

Uvođenje `experimental_useFormStatus` i povezanih API-ja više je od novog alata; predstavlja filozofsku promjenu u načinu na koji gradimo interaktivna iskustva s Reactom. Prihvaćanjem temelja web platforme i smještanjem logike stanja na poslužitelj, možemo graditi aplikacije koje su jednostavnije, otpornije i često i performantnije.

Vidjeli smo kako `useFormStatus` pruža čist, razdvojen način da komponente reagiraju na životni ciklus slanja obrasca. Eliminira prop drilling za stanja na čekanju i omogućuje elegantne, samostalne UI komponente poput pametnog `SubmitButton`-a. U kombinaciji s `useFormState`, otključava moćan obrazac validacije temeljene na statusu, gdje je poslužitelj krajnji autoritet, a glavna odgovornost klijenta je renderiranje stanja koju vraća poslužiteljska akcija.

Iako oznaka "experimental" nalaže određeni stupanj opreza, smjer je jasan. Budućnost obrazaca u Reactu je budućnost progresivnog poboljšanja, pojednostavljenog upravljanja stanjem i moćne, besprijekorne integracije između klijentske i poslužiteljske logike. Ovladavanjem ovim novim hookovima danas, ne učite samo novi API; pripremate se za sljedeću generaciju razvoja web aplikacija s Reactom.